<template>
  <div :class="DateComponentsClass">
    <!-- 使用 Element UI 的 el-row 组件创建一个行布局，设置间距为20 -->
    <el-row :gutter="20" class="tac">
      <el-col :span="19">
        <div style="width: 720px;height:59px;margin: 50px 0 0 0; background-color: white;">
          <el-menu mode="horizontal" router>
            <el-menu-item index="/index/recommended/detail">推荐</el-menu-item>
            <el-menu-item index="/index/recommended/newest">最新</el-menu-item>
          </el-menu>
        </div>
        <div style="width: 720px;min-height:100vh;margin: 0; background-color: white;">
          <el-row>
            <el-col v-for="article in articleArr" :key="article.id" style="border: 1px solid rgba(228, 230, 235, 0.3)">
              <el-row :gutter="15" style="height: 100px;margin-left: 5px">
                <el-col>
                  <a :href="article.link" style="text-decoration: none; color: inherit">
                    {{ article.title }}
                  </a>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from 'axios'; // 引入axios库
import tokenAxios from "@/http/request/TokenAxios";

const articleArr = ref([]); // 定义响应式数据
const categoryId = ref([]); // 定义categoryId的响应式引用

// 定义一个方法来发送请求到Spring Boot端点
const fetchArticles = async () => {
  try {
    const response = await tokenAxios.get(`http://123.60.129.240:49282/article/{categoryId}`);
    if (response.state === 20000) {
      articleArr.value = response.data;
    } else {
      // 处理其他状态码或错误情况
    }
  } catch (error) {
    console.error('请求错误:', error);
  }
};

onMounted(fetchArticles); // 在组件挂载后调用fetchArticles方法来发送请求
</script>